<!DOCTYPE html>
<html>
<head>
    <!-- 原始地址：//webapi.amap.com/ui/1.0/ui/misc/PoiPicker/examples/index.html -->
    <base href="//webapi.amap.com/ui/1.0/ui/misc/PoiPicker/examples/" />
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <script type="text/javascript" src="jquery.min.js"></script>
    <title>输入框选择POI点</title>
    <style>
    html,
    body,
    #container {
        width: 100%;
        height: 100%;
        margin: 0px;
        font-size: 13px;
    }
    
    #pickerBox {
        position: absolute;
        z-index: 9999;
        top: 50px;
        right: 30px;
        width: 300px;
    }
    
    #pickerInput {
        width: 200px;
        padding: 5px 5px;
    }
    
    #poiInfo {
        background: #fff;
    }
    
    .amap_lib_placeSearch .poibox.highlight {
        background-color: #CAE1FF;
    }
    
    .amap_lib_placeSearch .poi-more {
        display: none!important;
    }
    </style>
</head>
<body>
    <div id="container" class="map" tabindex="0"></div>
    <div id="pickerBox">
        s
        <div id="poiInfo"></div>
    </div>
    <script type="text/javascript" src='//webapi.amap.com/maps?v=1.4.15&key=3eaf3a7cb08172b2b618397301a209c0'></script>
   <script type="text/javascript">
     var park = [{
    	'hotelName' : '1号大酒店',
    	'center' : '104.080000,30.670000',
    	'type' : 1,
    	'index' :1,
    	
    	'address': '四川成都一环路南一段1号',
    	'state': 1,
    	'cpu': '30%',
    	'subDistricts' : []
    },{
    	'hotelName' : '2号大酒店',
    	'center' : '104.000000,30.670000',
    	'type' : 1,
    	'index' :2,
    	
    	'address': '四川成都二环路南一段10号',
    	'state': 2,
    	'cpu': '37%',
    	'subDistricts' : []
    }];
  /* --------------------------------------------- */

     </script>
    <!-- UI组件库 1.0 -->
    <script src="//webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>
    <script type="text/javascript">
    var map = new AMap.Map('container', {
    	resizeEnable: true,
        zoom: 10
       
    });
    var infoWindow = new AMap.InfoWindow({
		content:"aaa"//信息窗体的内容
	});
    //点击合法marker重定向到parkInfo页面
		 /*  var _onClick = function(e) {
			  infoWindow.setContent(e.target.content);
			  infoWindow.open(map,e.target.getPosition());
   		}  */ 
   		function markerClick(e) {
	        infoWindow.setContent(e.target.content);
	        infoWindow.open(map, e.target.getPosition());
	    }
		//循环输出数据库中所有的点的位置和信息
		var markers = [];
		for(var i = 0;i <= park.length;i+=1){
			var marker;//实例化marker
			marker = new AMap.Marker({
    					position: park[i].center.split(','),
    					title: park[i].hotelName,//鼠标移入显示酒店的名称
    					map: map,
    					index: park[i].index,
				        icon: park[i].icon//自定义显示在地图上的图标
    					        
    				});
    		markers.push(marker);
    		//给所有的点标注添加点击事件
    		/* AMap.event.addListener(marker, 'click', _onClick); */
    		//信息窗口
    		marker.content = park[i]['address'];
    		marker.on('click', markerClick);
    		marker.emit('click', {target: marker});
		}	
		//设置地图自适应
		map.setFitView();
		  /* --------------------------------------------- */

    </script>
   
</body>
</html>